<div class="layout-wrapper">
    <div id="layout-topbar">
        <a href="#" class="menu-button" (click)="onMenuButtonClick($event)">
            <i class="fa fa-bars"></i>
        </a>
        
        <a href="#" class="logo" [routerLink]="['/']">
            <img alt="logo" src="assets/showcase/images/logo.png" />
        </a>
        
        <ul class="topbar-menu">
            <li>
                <a href="#" [routerLink]="['/setup']">GET STARTED</a>
            </li>
            <li class="topbar-menu-themes">
                <a href="#">THEMES</a>
                <ul>
                    <li class="topbar-submenu-header">THEMING</li>
                    <li><a [routerLink]="['./theming']">Guide</a></li>
                    <li class="topbar-submenu-header">PREMIUM</li>
                    <li><a href="http://www.primefaces.org/layouts/avalon-ng"><img src="assets/showcase/images/themeswitcher-avalon.png" alt="Avalon (Bootstrap)"><span class="ui-text">Avalon</span></a></li>
                    <li><a href="http://www.primefaces.org/layouts/ultima-ng"><img src="assets/showcase/images/themeswitcher-ultima.png" alt="Ultima (Material)"><span class="ui-text">Ultima</span></a></li>
                    <li><a href="http://www.primefaces.org/layouts/paradise-ng"><img src="assets/showcase/images/themeswitcher-paradise.png" alt="Paradise"><span class="ui-text">Paradise</span></a></li>
                    <li><a href="http://www.primefaces.org/layouts/barcelona-ng"><img src="assets/showcase/images/themeswitcher-barcelona.png" alt="Barcelona (Material)"><span class="ui-text">Barcelona</span></a></li>
                    <li><a href="http://www.primefaces.org/layouts/manhattan-ng"><img src="assets/showcase/images/themeswitcher-manhattan.png" alt="Manhattan"><span class="ui-text">Manhattan</span></a></li>
                    <li><a href="http://www.primefaces.org/layouts/morpheus-ng"><img src="assets/showcase/images/themeswitcher-morpheus.png" alt="Morpheus"><span class="ui-text">Morpheus</span></a></li>
                    <li><a href="http://www.primefaces.org/layouts/atlantis-ng"><img src="assets/showcase/images/themeswitcher-atlantis.png" alt="Atlantis"><span class="ui-text">Atlantis</span></a></li>
                    <li><a href="http://www.primefaces.org/layouts/poseidon-ng"><img src="assets/showcase/images/themeswitcher-poseidon.png" alt="Poseidon"><span class="ui-text">Poseidon</span></a></li>
                    <li><a href="http://www.primefaces.org/layouts/omega-ng"><img src="assets/showcase/images/themeswitcher-omega.png" alt="Omega"><span class="ui-text">Omega</span></a></li>
                    <li class="topbar-submenu-header" style="margin-top:16px">FREE</li>
                    <li><a href="#" (click)="changeTheme($event, 'omega')"><span class="ui-text">Omega</span></a></li>
                    <li><a href="#" (click)="changeTheme($event, 'cupertino')"><span class="ui-text">Cupertino</span></a></li>
                    <li><a href="#" (click)="changeTheme($event, 'cruze')"><span class="ui-text">Cruze</span></a></li>
                    <li><a href="#" (click)="changeTheme($event, 'darkness')"><span class="ui-text">Darkness</span></a></li>
                    <li><a href="#" (click)="changeTheme($event, 'flick')"><span class="ui-text">Flick</span></a></li>
                    <li><a href="#" (click)="changeTheme($event, 'home')"><span class="ui-text">Home</span></a></li>
                    <li><a href="#" (click)="changeTheme($event, 'kasper')"><span class="ui-text">Kasper</span></a></li>
                    <li><a href="#" (click)="changeTheme($event, 'lightness')"><span class="ui-text">Lightness</span></a></li>
                    <li><a href="#" (click)="changeTheme($event, 'ludvig')"><span class="ui-text">Ludvig</span></a></li>
                    <li><a href="#" (click)="changeTheme($event, 'pepper-grinder')"><span class="ui-text">Pepper-Grinder</span></a></li>
                    <li><a href="#" (click)="changeTheme($event, 'redmond')"><span class="ui-text">Redmond</span></a></li>
                    <li><a href="#" (click)="changeTheme($event, 'rocket')"><span class="ui-text">Rocket</span></a></li>
                    <li><a href="#" (click)="changeTheme($event, 'south-street')"><span class="ui-text">South-Street</span></a></li>
                    <li><a href="#" (click)="changeTheme($event, 'start')"><span class="ui-text">Start</span></a></li>
                    <li><a href="#" (click)="changeTheme($event, 'trontastic')"><span class="ui-text">Trontastic</span></a></li>
                    <li><a href="#" (click)="changeTheme($event, 'voclain')"><span class="ui-text">Voclain</span></a></li>
                </ul>
            </li>
            <li>
                <a [routerLink]="['/support']">SUPPORT</a>
            </li>
        </ul>
    </div>
    
    <div id="layout-sidebar" [ngClass]="{'active': menuActive}">
        <div class="layout-menu">
            <a id="menu_input" #inputmenutitle [class.active-menuitem]="inputmenutitle.id == activeMenuId" (click)="activeMenuId = (activeMenuId === inputmenutitle.id ? null : inputmenutitle.id)">
                <img src="assets/showcase/images/icons/input-active.svg" class="layout-menu-icon-active"/>
                <img src="assets/showcase/images/icons/input.svg" class="layout-menu-icon-inactive"/>
                <span>Input</span>
            </a>
            <div [ngClass]="{submenushow: (inputmenutitle.id == activeMenuId), 'submenuhide': (inputmenutitle.id != activeMenuId)}">
                <a [routerLink]="['/inputgroup']" (click)="menuActive = false">&#9679; InputGroup</a>
                <a [routerLink]="['/autocomplete']" (click)="menuActive = false">&#9679; AutoComplete</a>
                <a [routerLink]="['/calendar']" (click)="menuActive = false">&#9679; Calendar</a>
                <a [routerLink]="['/checkbox']" (click)="menuActive = false">&#9679; Checkbox</a>
                <a [routerLink]="['/chips']" (click)="menuActive = false">&#9679; Chips</a>
                <a [routerLink]="['/colorpicker']" (click)="menuActive = false">&#9679; ColorPicker</a>
                <a [routerLink]="['/dropdown']" (click)="menuActive = false">&#9679; Dropdown</a>
                <a [routerLink]="['/editor']" (click)="menuActive = false">&#9679; Editor</a>
                <a [routerLink]="['/inputswitch']" (click)="menuActive = false">&#9679; InputSwitch</a>
                <a [routerLink]="['/inputtext']" (click)="menuActive = false">&#9679; InputText</a>
                <a [routerLink]="['/inputtextarea']" (click)="menuActive = false">&#9679; InputTextArea</a>
                <a [routerLink]="['/listbox']" (click)="menuActive = false">&#9679; Listbox</a>
                <a [routerLink]="['/inputmask']" (click)="menuActive = false">&#9679; Mask</a>
                <a [routerLink]="['/multiselect']" (click)="menuActive = false">&#9679; MultiSelect</a>
                <a [routerLink]="['/password']" (click)="menuActive = false">&#9679; Password</a>
                <a [routerLink]="['/radiobutton']" (click)="menuActive = false">&#9679; RadioButton</a>
                <a [routerLink]="['/rating']" (click)="menuActive = false">&#9679; Rating</a>
                <a [routerLink]="['/slider']" (click)="menuActive = false">&#9679; Slider</a>
                <a [routerLink]="['/spinner']" (click)="menuActive = false">&#9679; Spinner</a>
                <a [routerLink]="['/selectbutton']" (click)="menuActive = false">&#9679; SelectButton</a>
                <a [routerLink]="['/togglebutton']" (click)="menuActive = false">&#9679; ToggleButton</a>
                <a [routerLink]="['/tristatecheckbox']" (click)="menuActive = false">&#9679; TriCheckbox</a>
            </div>

            <a id="button_menutitle" #buttonmenutitle [class.active-menuitem]="buttonmenutitle.id == activeMenuId" (click)="activeMenuId = (activeMenuId === buttonmenutitle.id ? null : buttonmenutitle.id)">
                <img src="assets/showcase/images/icons/button-active.svg" class="layout-menu-icon-active"/>
                <img src="assets/showcase/images/icons/button.svg" class="layout-menu-icon-inactive"/>
                <span>Button</span>
            </a>
            <div [ngClass]="{'submenushow': (buttonmenutitle.id == activeMenuId), 'submenuhide': (buttonmenutitle.id != activeMenuId)}">
                <a [routerLink]="['/button']" (click)="menuActive = false">&#9679; Button</a>
                <a [routerLink]="['/splitbutton']" (click)="menuActive = false">&#9679; SplitButton</a>
            </div>

            <a id="data_menutitle" #datamenutitle [class.active-menuitem]="datamenutitle.id == activeMenuId" (click)="activeMenuId = (activeMenuId === datamenutitle.id ? null : datamenutitle.id)">
                <img src="assets/showcase/images/icons/data-active.svg" class="layout-menu-icon-active"/>
                <img src="assets/showcase/images/icons/data.svg" class="layout-menu-icon-inactive"/>
                <span>Data</span>
            </a>
            <div [ngClass]="{'submenushow': (datamenutitle.id == activeMenuId), 'submenuhide': (datamenutitle.id != activeMenuId)}">
                <a [routerLink]="['/carousel']" (click)="menuActive = false">&#9679; Carousel</a>
                <a [routerLink]="['/datagrid']" (click)="menuActive = false">&#9679; DataGrid</a>
                <a [routerLink]="['/datalist']" (click)="menuActive = false">&#9679; DataList</a>
                <a [routerLink]="['/datascroller']" (click)="menuActive = false">&#9679; DataScroller</a>
                <a [routerLink]="['/datatable']" (click)="menuActive = false">&#9679; DataTable</a>
                <a [routerLink]="['/organizationchart']" (click)="menuActive = false">&#9679; Org Chart</a>
                <a [routerLink]="['/orderlist']" (click)="menuActive = false">&#9679; OrderList</a>
                <a [routerLink]="['/gmap']" (click)="menuActive = false">&#9679; GMap</a>
                <a [routerLink]="['/paginator']" (click)="menuActive = false">&#9679; Paginator</a>
                <a [routerLink]="['/picklist']" (click)="menuActive = false">&#9679; PickList</a>
                <a [routerLink]="['/schedule']" (click)="menuActive = false">&#9679; Schedule</a>
                <a [routerLink]="['/tree']" (click)="menuActive = false">&#9679; Tree</a>
                <a [routerLink]="['/treetable']" (click)="menuActive = false">&#9679; TreeTable</a>
            </div>

            <a id="menu_panel" #panelmenutitle [class.active-menuitem]="panelmenutitle.id == activeMenuId" (click)="activeMenuId = (activeMenuId === panelmenutitle.id ? null : panelmenutitle.id)">
                <img src="assets/showcase/images/icons/panel-active.svg" class="layout-menu-icon-active"/>
                <img src="assets/showcase/images/icons/panel.svg" class="layout-menu-icon-inactive"/>
                <span>Panel</span>
            </a>
            <div [ngClass]="{'submenushow': (panelmenutitle.id == activeMenuId), 'submenuhide': (panelmenutitle.id != activeMenuId)}">
                <a [routerLink]="['/accordion']" (click)="menuActive = false">&#9679; Accordion</a>
                <a [routerLink]="['/fieldset']" (click)="menuActive = false">&#9679; Fieldset</a>
                <a [routerLink]="['/panel']" (click)="menuActive = false">&#9679; Panel</a>
                <a [routerLink]="['/grid']" (click)="menuActive = false">&#9679; Grid</a>
                <a [routerLink]="['/tabview']" (click)="menuActive = false">&#9679; TabView</a>
                <a [routerLink]="['/toolbar']" (click)="menuActive = false">&#9679; Toolbar</a>
            </div>

            <a id="menu_overlay" #overlaymenutitle [class.active-menuitem]="overlaymenutitle.id == activeMenuId" (click)="activeMenuId = (activeMenuId === overlaymenutitle.id ? null : overlaymenutitle.id)">
                <img src="assets/showcase/images/icons/overlay-active.svg" class="layout-menu-icon-active"/>
                <img src="assets/showcase/images/icons/overlay.svg" class="layout-menu-icon-inactive"/>
                <span>Overlay</span>
            </a>
            <div [ngClass]="{'submenushow': (overlaymenutitle.id == activeMenuId), 'submenuhide': (overlaymenutitle.id != activeMenuId)}">
                <a [routerLink]="['/confirmdialog']" (click)="menuActive = false">&#9679; ConfirmDialog</a>
                <a [routerLink]="['/dialog']" (click)="menuActive = false">&#9679; Dialog</a>
                <a [routerLink]="['/lightbox']" (click)="menuActive = false">&#9679; Lightbox</a>
                <a [routerLink]="['/overlaypanel']" (click)="menuActive = false">&#9679; OverlayPanel</a>
                <a [routerLink]="['/tooltip']" (click)="menuActive = false">&#9679; Tooltip</a>
            </div>
            
            <a id="menu_file" #filemenutitle [class.active-menuitem]="filemenutitle.id == activeMenuId" (click)="activeMenuId = (activeMenuId === filemenutitle.id ? null : filemenutitle.id)">
                <img src="assets/showcase/images/icons/file-active.svg" class="layout-menu-icon-active"/>
                <img src="assets/showcase/images/icons/file.svg" class="layout-menu-icon-inactive"/>
                <span>File</span>
            </a>
            <div [ngClass]="{'submenushow': (filemenutitle.id == activeMenuId), 'submenuhide': (filemenutitle.id != activeMenuId)}">
                <a [routerLink]="['/fileupload']" (click)="menuActive = false">&#9679; Upload</a>
            </div>

            <a id="menu_menu" #menumenutitle [class.active-menuitem]="menumenutitle.id == activeMenuId" (click)="activeMenuId = (activeMenuId === menumenutitle.id ? null : menumenutitle.id)">
                <img src="assets/showcase/images/icons/menu-active.svg" class="layout-menu-icon-active"/>
                <img src="assets/showcase/images/icons/menu.svg" class="layout-menu-icon-inactive"/>
                <span>Menu</span>
            </a>
            <div [ngClass]="{'submenushow': (menumenutitle.id == activeMenuId), 'submenuhide': (menumenutitle.id != activeMenuId)}">
                <a [routerLink]="['/menumodel']" (click)="menuActive = false">&#9679; MenuModel</a>
                <a [routerLink]="['/breadcrumb']" (click)="menuActive = false">&#9679; Breadcrumb</a>
                <a [routerLink]="['/contextmenu']" (click)="menuActive = false">&#9679; ContextMenu</a>
                <a [routerLink]="['/megamenu']" (click)="menuActive = false">&#9679; MegaMenu</a>
                <a [routerLink]="['/menu']" (click)="menuActive = false">&#9679; Menu</a>
                <a [routerLink]="['/menubar']" (click)="menuActive = false">&#9679; Menubar</a>
                <a [routerLink]="['/panelmenu']" (click)="menuActive = false">&#9679; PanelMenu</a>
                <a [routerLink]="['/slidemenu']" (click)="menuActive = false">&#9679; SlideMenu</a>
                <a [routerLink]="['/steps']" (click)="menuActive = false">&#9679; Steps</a>
                <a [routerLink]="['/tabmenu']" (click)="menuActive = false">&#9679; TabMenu</a>
                <a [routerLink]="['/tieredmenu']" (click)="menuActive = false">&#9679; TieredMenu</a>
            </div>

            <a id="menu_chart" #chartmenutitle [class.active-menuitem]="chartmenutitle.id == activeMenuId" (click)="activeMenuId = (activeMenuId === chartmenutitle.id ? null : chartmenutitle.id)">
                <img src="assets/showcase/images/icons/charts-active.svg" class="layout-menu-icon-active"/>
                <img src="assets/showcase/images/icons/charts.svg" class="layout-menu-icon-inactive"/>
                <span>Charts</span>
            </a>
            <div [ngClass]="{'submenushow': (chartmenutitle.id == activeMenuId), 'submenuhide': (chartmenutitle.id != activeMenuId)}">
                <a [routerLink]="['/chart']" (click)="menuActive = false">&#9679; ChartModel</a>
                <a [routerLink]="['/chart/bar']" (click)="menuActive = false">&#9679; Bar</a>
                <a [routerLink]="['/chart/doughnut']" (click)="menuActive = false">&#9679; Doughnut</a>
                <a [routerLink]="['/chart/line']" (click)="menuActive = false">&#9679; Line</a>
                <a [routerLink]="['/chart/polararea']" (click)="menuActive = false">&#9679; PolarArea</a>
                <a [routerLink]="['/chart/pie']" (click)="menuActive = false">&#9679; Pie</a>
                <a [routerLink]="['/chart/radar']" (click)="menuActive = false">&#9679; Radar</a>
            </div>

            <a id="menu_messages" #messagesmenutitle [class.active-menuitem]="messagesmenutitle.id == activeMenuId" (click)="activeMenuId = (activeMenuId === messagesmenutitle.id ? null : messagesmenutitle.id)">
                <img src="assets/showcase/images/icons/message-active.svg" class="layout-menu-icon-active"/>
                <img src="assets/showcase/images/icons/message.svg" class="layout-menu-icon-inactive"/>
                <span>Messages</span>
            </a>
            <div [ngClass]="{'submenushow': (messagesmenutitle.id == activeMenuId), 'submenuhide': (messagesmenutitle.id != activeMenuId)}">
                <a [routerLink]="['/messages']" (click)="menuActive = false">&#9679; Messages</a>
                <a [routerLink]="['/growl']" (click)="menuActive = false">&#9679; Growl</a>
            </div>

            <a id="menu_multimedia" #multimediamenutitle [class.active-menuitem]="multimediamenutitle.id == activeMenuId"
                    (click)="activeMenuId = (activeMenuId === multimediamenutitle.id ? null : multimediamenutitle.id)">
                    <img src="assets/showcase/images/icons/multimedia-active.svg" class="layout-menu-icon-active"/>
                    <img src="assets/showcase/images/icons/multimedia.svg" class="layout-menu-icon-inactive"/>
                    <span>Multimedia</span>
            </a>
            <div [ngClass]="{'submenushow': (multimediamenutitle.id == activeMenuId), 'submenuhide': (multimediamenutitle.id != activeMenuId)}">
                <a [routerLink]="['/galleria']" (click)="menuActive = false">&#9679; Galleria</a>
            </div>
            
            <a id="menu_dnd" #dndmenutitle [class.active-menuitem]="dndmenutitle.id == activeMenuId"
                    (click)="activeMenuId = (activeMenuId === dndmenutitle.id ? null : dndmenutitle.id)">
                    <img src="assets/showcase/images/icons/dragdrop-active.svg" class="layout-menu-icon-active"/>
                    <img src="assets/showcase/images/icons/dragdrop.svg" class="layout-menu-icon-inactive"/>
                    <span>DragDrop</span>
            </a>
            <div [ngClass]="{'submenushow': (dndmenutitle.id == activeMenuId), 'submenuhide': (dndmenutitle.id != activeMenuId)}">
                <a [routerLink]="['/dragdrop']" (click)="menuActive = false">&#9679; Drag&amp;Drop</a>
            </div>
            
            <a id="menu_misc" #misctitle [class.active-menuitem]="misctitle.id == activeMenuId"
                    (click)="activeMenuId = (activeMenuId === misctitle.id ? null : misctitle.id)">
                    <img src="assets/showcase/images/icons/misc-active.svg" class="layout-menu-icon-active"/>
                    <img src="assets/showcase/images/icons/misc.svg" class="layout-menu-icon-inactive"/>
                    <span>Misc</span>
            </a>
            <div [ngClass]="{'submenushow': (misctitle.id == activeMenuId), 'submenuhide': (misctitle.id != activeMenuId)}">
                <a [routerLink]="['/responsive']" (click)="menuActive = false">&#9679; Responsive</a>
                <a [routerLink]="['/rtl']" (click)="menuActive = false">&#9679; RTL</a>
                <a [routerLink]="['/defer']" (click)="menuActive = false">&#9679; Defer</a>
                <a [routerLink]="['/blockui']" (click)="menuActive = false">&#9679; BlockUI</a>
                <a [routerLink]="['/captcha']" (click)="menuActive = false">&#9679; Captcha</a>
                <a [routerLink]="['/inplace']" (click)="menuActive = false">&#9679; Inplace</a>
                <a [routerLink]="['/validation']" (click)="menuActive = false">&#9679; Validation</a>
                <a [routerLink]="['/progressbar']" (click)="menuActive = false">&#9679; ProgressBar</a>
                <a [routerLink]="['/codehighlighter']" (click)="menuActive = false">&#9679; CodeHighlighter</a>
                <a [routerLink]="['/terminal']" (click)="menuActive = false">&#9679; Terminal</a>
            </div>
        </div>
    </div>
    
    <div class="layout-mask" *ngIf="menuActive">
    </div>

    <div id="layout-content">
        <div>
            <router-outlet></router-outlet>
        </div>

        <div class="content-section layout-footer clearfix">
            <span><a href="http://www.primetek.com.tr">PrimeTek</a>, Copyright &copy; 2017</span>
            <div class="footer-links">
                <a href="https://github.com/primefaces/primeng"><i class="fa fa-github"></i></a>
                <a href="https://twitter.com/prime_ng"><i class="fa fa-twitter"></i></a>
            <div>
        </div>
    </div>

</div>